<script setup>
import { ref,reactive,nextTick } from 'vue'
import {getLodop} from '@/assets/lodop/LodopFuncs';
import { ElMessage } from 'element-plus'
const randId = ref(0);
const printFlag = ref(false)
const initRandId = ()=>{
    randId.value = parseInt(Math.random()*100000000);
}
initRandId();
const printHandle = (data="",templateStyle="")=>{
    if((data??'') === ''){
        ElMessage.error('订单打印异常!');
        return;
    }
    printFlag.value = data;
    nextTick(()=>{
        let innerHTML = $('#print'+randId.value)[0].innerHTML;
        //打印模板的样式
        let templateHtml =  templateStyle || `
            <!DOCTYPE html>
            <html lang="en">

            <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <meta http-equiv="X-UA-Compatible" content="ie=edge">
            <title>小票打印</title>
            <style>
                @page {
                padding: 0mm;
                margin-left: 0mm;
                margin-right: 3mm;

                }

                * {
                font-size: 10px;
                padding: 0;
                margin: 0;
                }

                #small-vote-kd {
                    width:48mm;
                    box-sizing:border-box;
                }
                .title-p1{
                    width:48mm;
                    text-align: center;
                    font-size:5mm;
                    margin-bottom: 8px;
                }
                .title-p2{
                    width:45mm;
                    text-align: center;
                    font-size:4mm;
                    margin-bottom: 8px;
                }
                .item {
                    color: #000;
                    line-height: 16px;

                }
                .item::after{
                    clear:both;
                }
                .item span {
                    margin-right: 24px;
                }

                .line {
                    margin-top: 4px;
                    margin-bottom: 4px;
                    border:1px dashed #000;
                }



                .flex {
                    display: flex;
                }

                .flex span {
                    flex: 1;
                    /* padding-left: 20px; */
                    margin: 0;
                }

                .for span {
                    margin-right: 10px;
                
                }

                .for:first-child {
                    margin-left: 0;
                }
                .for{
                    margin-bottom: 10px;
                }
                .box {
                    min-height: 16px;
                    color: #000;
                    line-height: 16px;
                }

                .box span {
                    display: inline-block;
                    width: 50%;
                }

                .box-line {
                    width: 100%;
                    border-bottom: 1px dashed #000;
                    margin: 10px 0;
                }

                .t-box {
                    display: flex;
                    margin-bottom: 5px;
                }

                .t-box>span {
                    flex: 1;
                }

                .m-box {
                    margin-bottom: 7px;
                }

                .m-box>span {
                    margin-right: 10px;
                }

                .item.clear>span {
                    margin-right: 5px;
                }
                .clear{
                    clear:both;
                }
            </style>
            </head>
            <body>
            ${ innerHTML }
            </body>
            </html>
        `
        LODOP = getLodop();
        let random = parseInt(Math.random() * 1000000);
        LODOP.PRINT_INIT(`打印小票${ random }`);
        LODOP.SET_LICENSES("","E12058BD3186576EB79CEF3804B68CF2","","");
        LODOP.SET_PRINT_STYLE("FontSize", 60);
        LODOP.SET_PRINT_STYLE("FontName","隶书");
        LODOP.SET_PRINT_STYLE("Bold", 1);
        LODOP.SET_PRINT_MODE("PRINT_PAGE_PERCENT", '100%');
        LODOP.ADD_PRINT_HTM(0,0,"96%", "100%",templateHtml);
        LODOP.SET_PRINT_PAGESIZE(3, '58mm',20, "");
        // LODOP.PRINT();
        LODOP.PREVIEW();
    })


}
defineExpose({printHandle})
</script>
<template>
    <div :id="'print' + randId" style="padding: 10px;" v-if="printFlag">
        <slot name="printTemplate">

        </slot>
    </div>
</template>